<template>
	<view @click="isMore = false">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
			<!-- 返回 -->
			<view class="back" @click="onBack">
				<view class="back-one" :class="{ action: PageScrollTop > 120 }">
					<text></text>
				</view>
			</view>
			<!-- tab切换 -->
			<view class="head-tab" v-if="PageScrollTop > 120">
				<view class="tab" :class="{'action':TabShow===0}" @click="onTab(0)">
					<text>商品</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===1}" @click="onTab(1)">
					<text>评价</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===2}" @click="onTab(2)">
					<text>详情</text>
					<text class="line"></text>
				</view>
			</view>
			<!-- 分享更多 -->
			<!-- <view class="share-more">
				<view class="share-more-one" :class="{ action: PageScrollTop > 120 }">
					<view class="list">
						<text class="iconfont icon-share"></text>
					</view>
					<view class="list" @click.stop="isMore = !isMore">
						<text class="iconfont icon-diandian"></text>
					</view>
				</view>
				<view class="mroe-list" v-show="isMore">
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-xiaoxi"></text>
						</view>
						<view class="title">
							<text>消息</text>
						</view>
					</navigator>
					<navigator open-type="switchTab" url="/pages/home/home" class="list">
						<view class="icon">
							<text class="iconfont icon-home"></text>
						</view>
						<view class="title">
							<text>首页</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-guanzhu"></text>
						</view>
						<view class="title">
							<text>我的关注</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-zuji"></text>
						</view>
						<view class="title">
							<text>浏览记录</text>
						</view>
					</navigator>
				</view>
			</view> -->
		</view>
		
		<!-- banner，标题 -->
		
		
		<view class="banner-title">
			<view class="">
				<video :src="goodsInfo.video_url" controls  loop muted 
					style="width: 100%;height: 200px; margin: auto;"></video>
			</view>
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in goodsInfo.img_list" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
            }}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
			<!-- 价格 -->
			<view class="goods-title">
				<text>{{goodsInfo.title}}</text>
			</view>
			<view class="price-info" >
				<view class="price">
					<text class="min">起拍价：</text>
					<text class="max">￥{{goodsInfo.start_price}}</text>
				</view>
				<view class="price">
					<text class="min">加价幅度：</text>
					<text class="max">￥{{goodsInfo.add_price}}</text>
				</view>
			</view>

			<!-- 标题 -->
			
			<!-- 开通会员 -->
			<!-- <view class="dredge-vip">
				<view class="title">
					<text class="iconfont icon-vip"></text>
					<text>
						周壹淘会员

					</text>
				</view>
				<view class="dredge">
					<text>立即</text>
					<text>开通</text>
				</view>
			</view> -->
		</view>
	
		<!-- 属性 -->
		<view class="shuxing">
			<view class="shuxing-list">
				<view class="title">
					商品参数
				</view>
				<view class="list" v-for="el in goodsInfo.attribute">
					<view class="weight">
						{{el._key}}:
					</view>
					<view class="canshu">
						{{el._value}}
					</view>
				</view>
			</view>
			<view class="xiangqing">
				<view class="title">
					快递费
				</view>
				<text>{{goodsInfo.express_fee||'免邮'}}</text>
			</view>
			<view class="xiangqing">
				<view class="title">
					可否自提
				</view>
				<text>{{goodsInfo.is_self_pickup|is_self_pickupFn}}</text>
			</view>
			<view class="xiangqing">
				<view class="title">
					详情介绍
				</view>
				<text>{{goodsInfo.introduce}}</text>
			</view>

		</view>
		<!-- 底部 -->
	<!-- 	<view class="page-footer">
			<view class="footer-fn">
				<view class="list" @click="gotoService">
					<text class="iconfont icon-kefu"></text>
					<text>客服</text>
				</view>
				<view class="list">

					<u-icon v-if="goodsInfo.collection" class="icon" id="myIcon" name="star-fill" label="收藏"
						label-size="26rpx" labelPos="bottom" color="red" size="20" @click="toggleIcon()"></u-icon>
					<u-icon v-else class="icon" id="myIcon" name="star-fill" label="收藏" label-size="26rpx"
						labelPos="bottom" color="block" size="20" @click="toggleIcon()"></u-icon>
				</view>
				<view class="list" @click="onToCart">
					<text class="iconfont icon-cart"></text>
					<text>购物车</text>
				</view>
			</view>
			<view class="footer-buy">
				<view class="cart-add" @click="$refs['GoodsAttr'].show(2)">
					<text>加入购物车</text>
				</view>
				<view class="buy-at" @click="$refs['GoodsAttr'].show(3)">
					<text>立即购买</text>
				</view>
			</view>
		</view> -->

		<!-- 属性规格 -->
		<goods-attr :goodsInfo="goodsInfo" ref="GoodsAttr"></goods-attr>
		<view style="background-color: #f00;color: #fff;" v-html="htmls"> </view>
	</view>
</template>

<script>
	import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';
	import {
		getGoodsInfoById,
		getAgreement,
		collection
	} from '@/config/api.js';
	export default {
		filters:{
			is_self_pickupFn(s){
				if(s == 1)return '是';
				return '不可'
			}
		},
		components: {

			GoodsAttr,
		},
		data() {
			return {
				htmls: '',
				id: null,
				storeInfo: {},
				goodsInfo: {},
				commentList: [],
				TabShow: 0,
				isMore: false,
				AttentionShow: 0,
				swiperList: [{
						id: 0,
						type: 'image',
						url: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg'
					},

				],
				web_content: '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
				PageScrollTop: 0,
				type: 0,
			};
		},
		onLoad(options) {
			console.log(options, '=======')
			// 获取传递的标题
			if (options.title) {
				this.title = decodeURIComponent(options.title); // 解码并设置标题
				uni.setNavigationBarTitle({
					title: this.title // 设置导航栏标题
				});
				this.id = options.goodsId;
				this.getgoodsInfo();
			}
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * 返回
			 */
			PurchaseNotes() {
				console.log(4444)
				getAgreement(5).then(res => {
					this.htmls = res;
				})
			},
			SellerRights() {
				console.log(3333)
				getAgreement(4).then(res => {
					this.htmls = res;
				})
			},
			showAboutUs() {
				console.log(2222)
				this.htmls = this.storeInfo.introduce;
			},
			toggleIcon() {
				const data = {};
				if (this.goodsInfo.collection) {
					data['id'] = this.goodsInfo.id;
					this.goodsInfo.collection = false;
				} else {
					data['goodsId'] = this.goodsInfo.id
					data['note'] = 1; // 区分收藏的 类型 1是商品
					this.goodsInfo.collection = true;
				}
				collection(data).then(res => {

				})
			},
			getgoodsInfo() {
				getGoodsInfoById({
					id: this.id,
					ispaimai: '1'
				}).then(res => {
					this.goodsInfo = res

				})
			},
			gotoService() {
				// +'&nav_id='+this.storeInfo.nav_id
				uni.navigateTo({
					url: '/pages/DiscountsActivity/DiscountsActivity?toUserId=' + this.storeInfo.user_id
				})
			},
			onBack() {
				uni.navigateBack();
			},
			//商家详情
			business() {
				uni.navigateTo({
					url: '/moduleB/businessDetails/businessDetails'
				})
			},
			/**
			 * tab
			 */
			onTab(type) {
				this.TabShow = type;
				switch (type) {
					case 0:
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
						break;
					case 1:
						uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
					case 2:
						uni.createSelectorQuery().select(".products-introduction").boundingClientRect((
							data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
				}
			},
			// g改变收藏颜色
			changeColor() {
				const icon = document.getElementById('myIcon');
				const currentName = icon.getAttribute('name');

				// 切换图标名称
				if (currentName === 'star-fill') {
					icon.setAttribute('name', 'star'); // 切换为 star
				} else if (currentName === 'star') {
					icon.setAttribute('name', 'yans'); // 切换为 yans
				} else {
					icon.setAttribute('name', 'star-fill'); // 切换回 star-fill
				}
			},
			/**
			 * 去购物车
			 */
			onToCart() {
				uni.navigateTo({
					url: '/moduleB/cart/cart'
				})
			},
			/**
			 * 降价通知点击
			 */
			onDepreciate() {
				uni.showToast({
					title: '降价通知提醒成功',
					icon: 'success'
				})
			},
			/**
			 * 关注点击
			 */
			onAttention() {
				if (this.AttentionShow === 0) {
					this.AttentionShow = 1;
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				} else {
					this.AttentionShow = 0;
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
				}

			},
			/**
			 * 评价点击
			 */
			onEvaluate() {
				uni.navigateTo({
					url: '/moduleB/GoodsEvaluateList/GoodsEvaluateList?goodsId=' + this.id
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'GoodsDetails.scss';
</style>